<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>

<!DOCTYPE html>
<html lang="zh-CN">
<tags:header></tags:header>

<body>
	<tags:navbar></tags:navbar>
	<div class="container-fluid">
		<div class="row-fluid">
			<tags:menu></tags:menu>
			<noscript>
				<div class="alert alert-block span10">
					<h4 class="alert-heading">Warning!</h4>
					<p>
						You need to have <a href="http://en.wikipedia.org/wiki/JavaScript"
							target="_blank">JavaScript</a> enabled to use this site.
					</p>
				</div>
			</noscript>

			<div id="content" class="span10">
				<div class="row-fluid sortable">
					<div class="box span12">
						<div class="box-header well" data-original-title>
							<h2>比赛</h2>
						</div>
						<div id="sandbox-container" class="row-fluid">
							<div class="input-append date">
								<input type="text" class="span2" value="${ymd}">
								<span class="add-on"><i class="icon-th"></i></span>
								<c:if test="${empty data }"> 
									<button id="fetchMatchBtn" class="btn btn-small btn-primary">fetch match</button>
								</c:if>
							</div>
						</div>
						<div class="box-content">
							<table
								class="table table-striped table-bordered bootstrap-datatable datatable">
								<thead>
									<tr>
										<th>ID</th>
										<th>Source ID</th>
										<th>主队</th>
										<th>客队</th>
										<th>比赛时间</th>
										<th>比分</th>
										<th>状态</th>
										<th>actions</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach var="item" items="${data}">
										<tr>
											<td>${item.id}</td>
											<td class="center">${item.matchNba.sourceId }</td>
											<td class="center">
												${item.hostTeam.teamName}
											</td>
											<td class="center">
												${item.guestTeam.teamName}
											</td>
											<td class="center">
												${item.matchNba.matchTime}
											</td>
											<td class="center">
												${item.matchNba.hostScore} : ${item.matchNba.guestScore}
											</td>
											<td class="center">
												${item.matchNba.status}
											</td>
											<td class="center"><a class="btn btn-success" href="#">
													<i class="icon-zoom-in icon-white"></i> View
											</a> <a class="btn btn-info" href="#"> <i
													class="icon-edit icon-white"></i> Edit
											</a> <a class="btn btn-danger" href="#"> <i
													class="icon-trash icon-white"></i> Delete
											</a></td>
										</tr>	
									</c:forEach>
									
								</tbody>
							</table>
						</div>
					</div>
				</div>

				<!-- content ends -->
			</div>
			<!--/#content.span10-->
		</div>
		<!--/fluid-row-->

		<hr>
		<!-- 
		<div class="modal hide fade" id="myModal">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h3>Settings</h3>
			</div>
			<div class="modal-body">
				<p>Here settings can be configured...</p>
			</div>
			<div class="modal-footer">
				<a href="#" class="btn" data-dismiss="modal">Close</a>
				<a href="#" class="btn btn-primary">Save changes</a>
			</div>
		</div>
 -->
		<tags:footer></tags:footer>

	</div>
	<!--/.fluid-container-->
	
	<tags:footer_scripts></tags:footer_scripts>
	<script type="text/javascript">
	function pad(value) {
        return (value.toString().length < 2) ? '0' + value : value;
    }
	$('#sandbox-container .input-append.date .add-on').datepicker({
		format: "yyyy-mm-dd",
		weekStart: 1,
		calendarWeeks: true,
	    autoclose: true,
	    language: "zh-CN",
	    todayHighlight: true
	});

	$('#sandbox-container .input-append.date .add-on').datepicker().on('changeDate', function(e){
		var d = new Date(e.date.valueOf());
		var ymd = d.getUTCFullYear() + "-" + pad(d.getUTCMonth() + 1) + "-" + pad(d.getUTCDate() + 1);
		window.location.href="/admin/nmatch/list?ymd=" + ymd;
    });
	$('#fetchMatchBtn').click(function (){
		var value = $('#sandbox-container .input-append.date .span2').val();
		$.ajax({    
	        type:'post',        
	        url:'/admin/nmatch/fetch.json',    
	        data:"ymd=" + value,    
	        cache:false,    
	        dataType:'json',    
	        success:function(data){
	        	window.location.href="/admin/nmatch/list?ymd=" + value;
	        }    
	    });  
	});
	</script>
</body>
</html>
